<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./lib/echarts.min.js"></script>
	</head>
	<body>
		<div style="width: 600px; height: 400px"></div>

		<script type="text/javascript">
			let mCharts = echarts.init(document.querySelector('div'));
			let xData = [
				'1月',
				'2月',
				'3月',
				'4月',
				'5月',
				'6月',
				'7月',
				'8月',
				'9月',
				'10月',
				'11月',
				'12月',
			];
			let yData1 = [
				3000,
				2800,
				900,
				1000,
				2200,
				4500,
				5000,
				3400,
				3000,
				2300,
				4500,
				5000,
			];
			let yData2 = [
				2300,
				2700,
				3000,
				3500,
				3700,
				4000,
				3800,
				3500,
				3200,
				2900,
				2600,
				2000,
			];
			let option = {
				title: {
					text: '2020年康师傅方便面年销售量表',
					textStyle: {
						color: 'green',
					},
				},
				xAxis: {
					type: 'category',
					data: xData,
				},
				yAxis: {
					type: 'value',
				},
				//堆叠图  第二个图表基于第一个图表的累加
				series: [
					{
						name: '销量',
						type: 'line',
						data: yData1,
						stack: 'all',
						areaStyle: {
							color: 'blue',
						},
					},
					{
						name: '销量',
						type: 'line',
						data: yData2,
						stack: 'all',
						areaStyle: {
							color: 'skyblue',
						},
					},
				],
			};
			mCharts.setOption(option);
		</script>
	</body>
</html>
